
<template>
	<div class="edit_view" :style='{}'>
        <div class="breadcrumb-wrapper" style="width: 100%;">
            <div class="bread_view">
                <el-breadcrumb separator="" class="breadcrumb">
                    <el-breadcrumb-item class="first_breadcrumb" :to="{ path: '/' }">首页</el-breadcrumb-item>
                    <el-breadcrumb-item class="second_breadcrumb" v-for="(item,index) in breadList" :key="index">{{item.name}}</el-breadcrumb-item>
                </el-breadcrumb>
            </div>
        </div>
		<el-form ref="formRef" :model="form" class="add_form" label-width="120px" :rules="rules">
			<el-row>
				<el-col :span="12">
					<el-form-item label="学号" prop="xuehao">
						<el-input class="list_inp" v-model="form.xuehao" placeholder="学号"
							type="text" :readonly="!isAdd||disabledForm.xuehao?true:false" />
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="密码" prop="mima">
						<el-input class="list_inp" v-model="form.mima" placeholder="密码"
							type="password" :readonly="!isAdd||disabledForm.mima?true:false" />
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="学生姓名" prop="xueshengxingming">
						<el-input class="list_inp" v-model="form.xueshengxingming" placeholder="学生姓名"
							 type="text" 							:readonly="!isAdd||disabledForm.xueshengxingming?true:false" />
					</el-form-item>
				</el-col>

				<el-col :span="12">
					<el-form-item label="性别" prop="xingbie">
						<el-select
							class="list_sel"
							:disabled="!isAdd||disabledForm.xingbie?true:false"
							v-model="form.xingbie" 
							placeholder="请选择性别"
							style="width:100%;"
							>
							<el-option v-for="(item,index) in xingbieLists" :label="item"
								:value="item"
								>
							</el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="学院" prop="xueyuan">
						<el-input class="list_inp" v-model="form.xueyuan" placeholder="学院"
							 type="text" 							:readonly="!isAdd||disabledForm.xueyuan?true:false" />
					</el-form-item>
				</el-col>

				<el-col :span="12">
					<el-form-item label="专业" prop="zhuanye">
						<el-input class="list_inp" v-model="form.zhuanye" placeholder="专业"
							 type="text" 							:readonly="!isAdd||disabledForm.zhuanye?true:false" />
					</el-form-item>
				</el-col>

				<el-col :span="12">
					<el-form-item label="年级" prop="nianji">
						<el-input class="list_inp" v-model="form.nianji" placeholder="年级"
							 type="text" 							:readonly="!isAdd||disabledForm.nianji?true:false" />
					</el-form-item>
				</el-col>

				<el-col :span="12">
					<el-form-item label="学历" prop="xueli">
						<el-select
							class="list_sel"
							:disabled="!isAdd||disabledForm.xueli?true:false"
							v-model="form.xueli" 
							placeholder="请选择学历"
							style="width:100%;"
							>
							<el-option v-for="(item,index) in xueliLists" :label="item"
								:value="item"
								>
							</el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="是否毕业" prop="shifoubiye">
						<el-select
							class="list_sel"
							:disabled="!isAdd||disabledForm.shifoubiye?true:false"
							v-model="form.shifoubiye" 
							placeholder="请选择是否毕业"
							style="width:100%;"
							>
							<el-option v-for="(item,index) in shifoubiyeLists" :label="item"
								:value="item"
								>
							</el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="毕业年份" prop="biyenianfen">
						<el-input class="list_inp" v-model="form.biyenianfen" placeholder="毕业年份"
							 type="text" 							:readonly="!isAdd||disabledForm.biyenianfen?true:false" />
					</el-form-item>
				</el-col>

				<el-col :span="12">
					<el-form-item label="项目负责人" prop="xiangmufuzeren">
						<el-select
							class="list_sel"
							:disabled="!isAdd||disabledForm.xiangmufuzeren?true:false"
							v-model="form.xiangmufuzeren" 
							placeholder="请选择项目负责人"
							style="width:100%;"
							>
							<el-option v-for="(item,index) in xiangmufuzerenLists" :label="item"
								:value="item"
								>
							</el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="所在学校" prop="suozaixuexiao">
						<el-input class="list_inp" v-model="form.suozaixuexiao" placeholder="所在学校"
							 type="text" 							:readonly="!isAdd||disabledForm.suozaixuexiao?true:false" />
					</el-form-item>
				</el-col>

				<el-col :span="12">
					<el-form-item label="邮箱" prop="youxiang">
						<el-input class="list_inp" v-model="form.youxiang" placeholder="邮箱"
							 type="text" 							:readonly="!isAdd||disabledForm.youxiang?true:false" />
					</el-form-item>
				</el-col>

				<el-col :span="12">
					<el-form-item label="头像" prop="touxiang">
						<uploads
							:disabled="!isAdd||disabledForm.touxiang?true:false"
							action="file/upload" 
							tip="请上传头像"
							style="width: 100%;text-align: left;"
							:fileUrls="form.touxiang?form.touxiang:''" 
							@change="touxiangUploadSuccess">
						</uploads>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="创业领域" prop="chuangyelingyu">
						<el-input class="list_inp" v-model="form.chuangyelingyu" placeholder="创业领域"
							 type="text" 							:readonly="!isAdd||disabledForm.chuangyelingyu?true:false" />
					</el-form-item>
				</el-col>

				<el-col :span="12">
					<el-form-item label="参加过的创业活动" prop="canjiahuodong">
						<el-input class="list_inp" v-model="form.canjiahuodong" placeholder="参加过的创业活动"
							 type="text" 							:readonly="!isAdd||disabledForm.canjiahuodong?true:false" />
					</el-form-item>
				</el-col>

				<el-col :span="12">
					<el-form-item label="参与过的项目" prop="canyuxiangmu">
						<el-input class="list_inp" v-model="form.canyuxiangmu" placeholder="参与过的项目"
							 type="text" 							:readonly="!isAdd||disabledForm.canyuxiangmu?true:false" />
					</el-form-item>
				</el-col>

				<el-col :span="12">
					<el-form-item label="类型" prop="leixing">
						<el-select
							class="list_sel"
							:disabled="!isAdd||disabledForm.leixing?true:false"
							v-model="form.leixing" 
							placeholder="请选择类型"
							style="width:100%;"
							>
							<el-option v-for="(item,index) in leixingLists" :label="item"
								:value="item"
								>
							</el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="城市" prop="chengshi">
						<el-select
							class="list_sel"
							:disabled="!isAdd||disabledForm.chengshi?true:false"
							v-model="form.chengshi" 
							placeholder="请选择城市"
							style="width:100%;"
							@change="(e)=>change1(e,'chengshi')">
							<el-option v-for="(item,index) in chengshiLists" :label="item"
								:value="item"
								>
							</el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="园区" prop="yuanqu">
						<el-select
							class="list_sel"
							:disabled="!isAdd||disabledForm.yuanqu?true:false"
							v-model="form.yuanqu" 
							placeholder="请选择园区"
							style="width:100%;"
							@change="(e)=>change2(e,'yuanqu')">
							<el-option v-for="(item,index) in yuanquLists" :label="item"
								:value="item"
								>
							</el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="街道" prop="jiedao">
						<el-select
							class="list_sel"
							:disabled="!isAdd||disabledForm.jiedao?true:false"
							v-model="form.jiedao" 
							placeholder="请选择街道"
							style="width:100%;"
							>
							<el-option v-for="(item,index) in jiedaoLists" :label="item"
								:value="item"
								>
							</el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="邮箱" prop="email">
						<el-input class="list_inp" v-model="form.email" placeholder="邮箱"
							 type="text" 							:readonly="!isAdd||disabledForm.email?true:false" />
					</el-form-item>
				</el-col>

			</el-row>
			<div class="formModel_btn_box">
				<el-button class="formModel_cancel" @click="backClick">取消</el-button>
				<el-button class="formModel_confirm"
                           @click="save"
                           type="success"
				>
					保存
				</el-button>
			</div>
		</el-form>
	</div>
</template>
<script setup>
	import {
		ref,
		getCurrentInstance,
		watch,
		onUnmounted,
		onMounted,
		nextTick,
		computed
	} from 'vue';
	import {
		useRoute,
		useRouter
	} from 'vue-router';
	const context = getCurrentInstance()?.appContext.config.globalProperties;
	const route = useRoute()
	const router = useRouter()
	//基础信息
	const tableName = 'chuangyezhe'
	const formName = '创业者'
	//基础信息
	const breadList = ref([{
		name: formName
	}])
	//获取唯一标识
	const getUUID =()=> {
      return new Date().getTime();
    }
	//form表单
	const form = ref({
		xuehao: '',
		mima: '',
		xueshengxingming: '',
		xingbie: '',
		xueyuan: '',
		zhuanye: '',
		nianji: '',
		xueli: '',
		shifoubiye: '',
		biyenianfen: '',
		xiangmufuzeren: '',
		suozaixuexiao: '',
		youxiang: '',
		touxiang: '',
		chuangyelingyu: '',
		canjiahuodong: '',
		canyuxiangmu: '',
		leixing: '',
		chengshi: '',
		yuanqu: '',
		jiedao: '',
		email: '',
	})
	const formRef = ref(null)
	const id = ref(0)
	const type = ref('')
	const disabledForm = ref({
		xuehao : false,
		mima : false,
		xueshengxingming : false,
		xingbie : false,
		xueyuan : false,
		zhuanye : false,
		nianji : false,
		xueli : false,
		shifoubiye : false,
		biyenianfen : false,
		xiangmufuzeren : false,
		suozaixuexiao : false,
		youxiang : false,
		touxiang : false,
		chuangyelingyu : false,
		canjiahuodong : false,
		canyuxiangmu : false,
		leixing : false,
		chengshi : false,
		yuanqu : false,
		jiedao : false,
		email : false,
	})
	const isAdd = ref(false)
	//表单验证
	//匹配整数
	const validateIntNumber = (rule, value, callback) => {
		if (!value) {
			callback();
		} else if (!context?.$toolUtil.isIntNumer(value)) {
			callback(new Error("请输入整数"));
		} else {
			callback();
		}
	}
	//匹配数字
	const validateNumber = (rule, value, callback) => {
		if(!value){
			callback();
		} else if (!context?.$toolUtil.isNumber(value)) {
			callback(new Error("请输入数字"));
		} else {
			callback();
		}
	}
	//匹配手机号码
	const validateMobile = (rule, value, callback) => {
		if(!value){
			callback();
		} else if (!context?.$toolUtil.isMobile(value)) {
			callback(new Error("请输入正确的手机号码"));
		} else {
			callback();
		}
	}
	//匹配电话号码
	const validatePhone = (rule, value, callback) => {
		if(!value){
			callback();
		} else if (!context?.$toolUtil.isPhone(value)) {
			callback(new Error("请输入正确的电话号码"));
		} else {
			callback();
		}
	}
	//匹配邮箱
	const validateEmail = (rule, value, callback) => {
		if(!value){
			callback();
		} else if (!context?.$toolUtil.isEmail(value)) {
			callback(new Error("请输入正确的邮箱地址"));
		} else {
			callback();
		}
	}
	//匹配身份证
	const validateIdCard = (rule, value, callback) => {
		if(!value){
			callback();
		} else if (!context?.$toolUtil.checkIdCard(value)) {
			callback(new Error("请输入正确的身份证号码"));
		} else {
			callback();
		}
	}
	//匹配网站地址
	const validateUrl = (rule, value, callback) => {
		if(!value){
			callback();
		} else if (!context?.$toolUtil.isURL(value)) {
			callback(new Error("请输入正确的URL地址"));
		} else {
			callback();
		}
	}
	const rules = ref({
		xuehao: [
			{required: true,message: '请输入',trigger: 'blur'}, 
		],
		mima: [
			{required: true,message: '请输入',trigger: 'blur'}, 
		],
		xueshengxingming: [
			{required: true,message: '请输入',trigger: 'blur'}, 
		],
		xingbie: [
			{required: true,message: '请输入',trigger: 'blur'}, 
		],
		xueyuan: [
			{required: true,message: '请输入',trigger: 'blur'}, 
		],
		zhuanye: [
			{required: true,message: '请输入',trigger: 'blur'}, 
		],
		nianji: [
			{required: true,message: '请输入',trigger: 'blur'}, 
		],
		xueli: [
			{required: true,message: '请输入',trigger: 'blur'}, 
		],
		shifoubiye: [
			{required: true,message: '请输入',trigger: 'blur'}, 
		],
		biyenianfen: [
			{required: true,message: '请输入',trigger: 'blur'}, 
		],
		xiangmufuzeren: [
			{required: true,message: '请输入',trigger: 'blur'}, 
		],
		suozaixuexiao: [
			{required: true,message: '请输入',trigger: 'blur'}, 
		],
		youxiang: [
			{required: true,message: '请输入',trigger: 'blur'}, 
			{ validator: validateEmail, trigger: 'blur' },
		],
		touxiang: [
		],
		chuangyelingyu: [
		],
		canjiahuodong: [
		],
		canyuxiangmu: [
		],
		leixing: [
		],
		chengshi: [
		],
		yuanqu: [
		],
		jiedao: [
		],
		email: [
			{ validator: validateEmail, trigger: 'blur' },
		],
	})
	//性别列表
	const xingbieLists = ref([])
	//学历列表
	const xueliLists = ref([])
	//是否毕业列表
	const shifoubiyeLists = ref([])
	//项目负责人列表
	const xiangmufuzerenLists = ref([])
	//头像上传回调
	const touxiangUploadSuccess=(e)=>{
		form.value.touxiang = e
	}
	//类型列表
	const leixingLists = ref([])
	//城市列表
	const chengshiLists = ref([])
	//园区列表
	const yuanquLists = ref([])
	//街道列表
	const jiedaoLists = ref([])
	//methods

	//methods
	//获取info
	const getInfo = ()=>{
		context?.$http({
			url: `${tableName}/info/${id.value}`,
			method: 'get'
		}).then(res => {
			let reg=new RegExp('../../../file','g')
			form.value = res.data.data
		})
	}
	const crossRow = ref('')
	const crossTable = ref('')
	const crossTips = ref('')
	const crossColumnName = ref('')
	const crossColumnValue = ref('')
	//初始化
	const init = (formId=null,formType='add',formNames='',row=null,table=null,statusColumnName=null,tips=null,statusColumnValue=null) => {
		if(formId){
			id.value = formId
			type.value = formType
		}
		if(formType == 'add'){
			isAdd.value = true
		}else if(formType == 'info'){
			isAdd.value = false
			getInfo()
		}else if(formType == 'edit'){
			isAdd.value = true
			getInfo()
		}
		else if(formType == 'cross'){
			isAdd.value = true
			// getInfo()
			for(let x in row){
				if(x=='xuehao'){
					form.value.xuehao = row[x];
					disabledForm.value.xuehao = true;
					continue;
				}
				if(x=='mima'){
					form.value.mima = row[x];
					disabledForm.value.mima = true;
					continue;
				}
				if(x=='xueshengxingming'){
					form.value.xueshengxingming = row[x];
					disabledForm.value.xueshengxingming = true;
					continue;
				}
				if(x=='xingbie'){
					form.value.xingbie = row[x];
					disabledForm.value.xingbie = true;
					continue;
				}
				if(x=='xueyuan'){
					form.value.xueyuan = row[x];
					disabledForm.value.xueyuan = true;
					continue;
				}
				if(x=='zhuanye'){
					form.value.zhuanye = row[x];
					disabledForm.value.zhuanye = true;
					continue;
				}
				if(x=='nianji'){
					form.value.nianji = row[x];
					disabledForm.value.nianji = true;
					continue;
				}
				if(x=='xueli'){
					form.value.xueli = row[x];
					disabledForm.value.xueli = true;
					continue;
				}
				if(x=='shifoubiye'){
					form.value.shifoubiye = row[x];
					disabledForm.value.shifoubiye = true;
					continue;
				}
				if(x=='biyenianfen'){
					form.value.biyenianfen = row[x];
					disabledForm.value.biyenianfen = true;
					continue;
				}
				if(x=='xiangmufuzeren'){
					form.value.xiangmufuzeren = row[x];
					disabledForm.value.xiangmufuzeren = true;
					continue;
				}
				if(x=='suozaixuexiao'){
					form.value.suozaixuexiao = row[x];
					disabledForm.value.suozaixuexiao = true;
					continue;
				}
				if(x=='youxiang'){
					form.value.youxiang = row[x];
					disabledForm.value.youxiang = true;
					continue;
				}
				if(x=='touxiang'){
					form.value.touxiang = row[x];
					disabledForm.value.touxiang = true;
					continue;
				}
				if(x=='chuangyelingyu'){
					form.value.chuangyelingyu = row[x];
					disabledForm.value.chuangyelingyu = true;
					continue;
				}
				if(x=='canjiahuodong'){
					form.value.canjiahuodong = row[x];
					disabledForm.value.canjiahuodong = true;
					continue;
				}
				if(x=='canyuxiangmu'){
					form.value.canyuxiangmu = row[x];
					disabledForm.value.canyuxiangmu = true;
					continue;
				}
				if(x=='leixing'){
					form.value.leixing = row[x];
					disabledForm.value.leixing = true;
					continue;
				}
				if(x=='chengshi'){
					form.value.chengshi = row[x];
					disabledForm.value.chengshi = true;
					continue;
				}
				if(x=='yuanqu'){
					form.value.yuanqu = row[x];
					disabledForm.value.yuanqu = true;
					continue;
				}
				if(x=='jiedao'){
					form.value.jiedao = row[x];
					disabledForm.value.jiedao = true;
					continue;
				}
				if(x=='email'){
					form.value.email = row[x];
					disabledForm.value.email = true;
					continue;
				}
			}
			if(row){
				crossRow.value = row
			}
			if(table){
				crossTable.value = table
			}
			if(tips){
				crossTips.value = tips
			}
			if(statusColumnName){
				crossColumnName.value = statusColumnName
			}
			if(statusColumnValue){
				crossColumnValue.value = statusColumnValue
			}
		}
		context?.$http({
			url: `${context?.$toolUtil.storageGet('frontSessionTable')}/session`,
			method: 'get'
		}).then(res => {
			var json = res.data.data
            if (localStorage.getItem('autoSave')) {
                localStorage.removeItem('autoSave')
                save()
            }
		})
		xingbieLists.value = "男,女".split(',')
		xueliLists.value = "小学,初中,高中,中专,大专,本科,研究生,博士".split(',')
		shifoubiyeLists.value = "是,否".split(',')
		xiangmufuzerenLists.value = "是,否".split(',')
		leixingLists.value = "在校生,毕业生".split(',')
		context?.$http({
			url: `option/chengshi/chengshi`,
			method: 'get'
		}).then(res=>{
			chengshiLists.value = res.data.data
		})
	}
	//初始化
	//取消
	const backClick = () => {
		history.back()
	}
    // 多级联动参数
	const change1 = (e,conditionColumn)=>{
		form.value.yuanqu = '';
        yuanquLists.value = [];
		form.value.jiedao = '';
        jiedaoLists.value = [];
		context?.$http({
			url: `option/yuanqu/yuanqu?conditionColumn=${conditionColumn}&conditionValue=${e}`,
			method: 'get'
		}).then(res=>{
			yuanquLists.value = res.data.data
		})
	}
    // 多级联动参数
	const change2 = (e,conditionColumn)=>{
		form.value.jiedao = '';
        jiedaoLists.value = [];
		context?.$http({
			url: `option/jiedao/jiedao?conditionColumn=${conditionColumn}&conditionValue=${e}`,
			method: 'get'
		}).then(res=>{
			jiedaoLists.value = res.data.data
		})
	}
	//提交
	const save=()=>{
		if(form.value.touxiang!=null) {
			form.value.touxiang = form.value.touxiang.replace(new RegExp(context?.$config.url,"g"),"");
		}
		var table = crossTable.value
		var objcross = JSON.parse(JSON.stringify(crossRow.value))
		let crossUserId = ''
		let crossRefId = ''
		let crossOptNum = ''
		if(type.value == 'cross'){
			if(crossColumnName.value!=''){
				if(!crossColumnName.value.startsWith('[')){
					for(let o in objcross){
						if(o == crossColumnName.value){
							objcross[o] = crossColumnValue.value
						}
					}
					//修改跨表数据
					changeCrossData(objcross)
				}else{
					crossUserId = context?.$toolUtil.storageGet('userid')
					crossRefId = objcross['id']
					crossOptNum = crossColumnName.value.replace(/\[/,"").replace(/\]/,"")
				}
			}
		}
		formRef.value.validate((valid)=>{
			if(valid){
				if(crossUserId&&crossRefId){
					form.value.crossuserid = crossUserId
					form.value.crossrefid = crossRefId
					let params = {
						page: 1,
						limit: 1000, 
						crossuserid:form.value.crossuserid,
						crossrefid:form.value.crossrefid,
					}
					context?.$http({
						url: `${tableName}/page`,
						method: 'get', 
						params: params 
					}).then(res=>{
						if(res.data.data.total>=crossOptNum){
							context?.$toolUtil.message(`${crossTips.value}`,'error')
							return false
						}else{
							context?.$http({
								url: `${tableName}/${!form.value.id ? "save" : "update"}`,
								method: 'post', 
								data: form.value 
							}).then(res=>{
                                context?.$toolUtil.message(`操作成功`,'success')
                                history.back()
							})
						}
					})
				}else{
					context?.$http({
						url: `${tableName}/${!form.value.id ? "save" : "update"}`,
						method: 'post', 
						data: form.value 
					}).then(res=>{
                        context?.$toolUtil.message(`操作成功`,'success')
                        history.back()
					})
				}
			}
		})
	}
	//修改跨表数据
	const changeCrossData=(row)=>{
        if(type.value == 'cross'){
            context?.$http({
                url: `${crossTable.value}/update`,
                method: 'post',
                data: row
            }).then(res=>{})
        }
	}
	onMounted(()=>{
		type.value = route.query.type?route.query.type:'add'
		let row = null
		let table = null
		let statusColumnName = null
		let tips = null
		let statusColumnValue = null
		if(type.value == 'cross'){
			row = context?.$toolUtil.storageGet('crossObj')?JSON.parse(context?.$toolUtil.storageGet('crossObj')):{}
			table = context?.$toolUtil.storageGet('crossTable')
			statusColumnName = context?.$toolUtil.storageGet('crossStatusColumnName')
			tips = context?.$toolUtil.storageGet('crossTips')
			statusColumnValue = context?.$toolUtil.storageGet('crossStatusColumnValue')
		}
		init(route.query.id?route.query.id:null, type.value,'', row, table, statusColumnName, tips, statusColumnValue)
	})
    onUnmounted(()=>{
        Object.keys(localStorage).map(item=>{
            if(item.startsWith('cross')){
                localStorage.removeItem(item)
            }
        })
    })
</script>
<style lang="scss" scoped>
	// 面包屑盒子
	.bread_view {
		:deep(.breadcrumb) {
			.el-breadcrumb__separator {
			}
			.first_breadcrumb {
				.el-breadcrumb__inner {
				}
			}
			.second_breadcrumb {
				.el-breadcrumb__inner {
				}
			}
		}
	}
	// 表单
	.add_form{
		// form item
		:deep(.el-form-item) {
			//label
			.el-form-item__label {
			}
			// 内容盒子
			.el-form-item__content {
				// 输入框
				.list_inp {

				}
				// 下拉框
				.list_sel {
					//去掉默认样式
					.select-trigger{
						height: 100%;
						.el-input{
							height: 100%;
						}
					}
				}
				//图片上传样式
				.el-upload-list  {
					//提示语
					.el-upload__tip {
					}
					//外部盒子
					.el-upload--picture-card {
						//图标
						.el-icon{
						}
					}
					.el-upload-list__item {
					}
				}
			}
		}
	}
	// 按钮盒子
	.formModel_btn_box {
		.formModel_cancel {
		}
		.formModel_cancel:hover {
		}
		
		.formModel_confirm {
		}
		.formModel_confirm:hover {
		}
	}
</style>
<style>
.edit_view {
    margin: 20px auto;
    width: 1400px;
    position: relative;
    background: rgb(255, 255, 255);
    font-size:16px;
    color:#666;
}
.edit_view .add_form{
    width: 100%;
    padding: 30px;
    border:1px solid #eee;
}
.edit_view .add_form .el-form-item{
    margin: 0px 0px 20px;
    display: flex;
}
.edit_view .add_form .el-form-item .el-form-item__label{
    width: 150px;
    background: none;
    text-align: right;
    display: block;
    font-size: 16px;
    color: rgb(51, 51, 51);
    font-weight: 500;
}
.edit_view .add_form .el-form-item .el-form-item__content{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    width: calc(100% - 120px);
}
.edit_view .add_form .el-form-item .el-form-item__content .list_inp{
    height: 36px;
    line-height: 36px;
    border: 1px solid rgba(226, 227, 229, 1);
    padding: 0px 10px;
    width: 100%;
    box-sizing: border-box;
    background: rgb(255, 255, 255);
    font-size: 16px;
}

.edit_view .add_form .el-form-item .el-form-item__content .list_sel{
    line-height: 36px;
    
    box-sizing: border-box;
    width: calc(100% - 120px);
    padding: 0px 10px;
    border-radius: 0px;
    background: rgb(255, 255, 255);
    font-size: 16px;
}







.edit_view .add_form .el-form-item .el-form-item__content .el-upload--picture-card{
    background-color: rgb(255, 255, 255);
    width: 100px;
    height: 90px;
    line-height: 100px;
    text-align: center;
    
    border-radius: 0px;
    cursor: pointer;
}

.edit_view .add_form .el-form-item .el-form-item__content .el-upload--picture-card .el-icon{
    font-size: 32px;
    color: #999;
}

.edit_view .add_form .el-form-item .el-form-item__content .img-uploader .el-upload__tip{
    font-size: 15px;
    color: #666;
    margin: 0;
}



</style>